{% extends "dvaui/base.html" %}
{% load staticfiles %}
{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Query results</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-5">
    <div class="box">
    <div class="box-body text-center">
        <img class="img-responsive img-bordered"  src="{{ url }}" style="width:80%;margin-left:auto;margin-right:auto" />
    </div>
    <div class="box-footer text-center">
        <a href="/requery/{{ object.pk }}/" class="btn btn-info"><i class="fa fa-search"></i> Query again </a>
    </div>
    </div>
    </div>
    <div class="col-lg-7">
        <div class="box box-primary">
            <div class="box-header with-border">
                <a class="btn btn-primary pull-right" href="/process/{{ object.pk }}">View details for process ID {{ object.pk }}</a>
                <h4 class="pull-left">Process and Tasks</h4>
            </div>
            <div class="box-body">
                <div class="row text-center">
                    <div class="col-xs-3">
                        <a class="btn btn-warning btn-block" href="{% url 'process_tasks_status' object.pk 'pending' %}" style="margin: 10px auto" > <i class="fa fa-clock-o"></i> {{ pending_tasks }} pending</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-primary btn-block" href="{% url 'process_tasks_status' object.pk 'running' %}" style="margin: 10px auto" > <i class="fa fa-gears"></i> {{ running_tasks }} running</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-success btn-block" href="{% url 'process_tasks_status' object.pk 'successful' %}" style="margin: 10px auto" > <i class="fa fa-check"></i> {{ successful_tasks }} done</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-danger btn-block" href="{% url 'process_tasks_status' object.pk 'failed' %}" style="margin: 10px auto" > <i class="fa fa-close"></i> {{ errored_tasks }} failed</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Regions</h4>
            </div>
            <div class="box-body">
                <table class="table dataTables">
                <thead>
                <tr>
                        <th>object name</th>
                        <th>confidence</th>
                        <th>type</th>
                        <th>x</th>
                        <th>y</th>
                        <th>w</th>
                        <th>h</th>
                        <th class="text-center">retrieval results</th>
                        <th class="text-center">metadata & bounding box</th>
                        <th class="text-center">event</th>
                </tr>
                </thead>
                <tbody>
                {% for d in regions %}
                    {% if not d.full_frame %}
                    <tr>
                        <td>{{ d.object_name }} </td>
                        <td>{{ d.confidence|floatformat:2 }} </td>
                        <td>{{ d.region_type }} </td>
                        <td>{{ d.x }} </td>
                        <td>{{ d.y }} </td>
                        <td>{{ d.w }} </td>
                        <td>{{ d.h }} </td>
                        <td class="text-center">{% if d.results %}<a  class="btn btn-primary" href="#retrieval_{{ d.pk }}">view retrieval results</a>{% endif %}</td>
                        <td class="text-center"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{{ d.pk }}">view metadata</button></td>
                        <td class="text-center"><a  class="btn btn-primary" href="/task_detail/{{ d.event_id }}" >view event</a></td>
                    </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
                </table>
            </div>
        </div>
        {% for k in regions %}
         <div class="modal fade" id="{{ k.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{ k.object_name }}</h4>
              </div>
              <div class="modal-body">
                <h4 class="text-center">Text metadata</h4>
                <textarea rows="10" style="width:100%;">{{ k.text }}</textarea>
                <h4 class="text-center">JSON metadata</h4>
                <textarea rows="10" style="width:100%;">{{ k.metadata }}</textarea>
                {% if not k.full_frame %}
                <h4 class="text-center" style="margin-bottom:15px;margin-top:20px">Bounding box</h4>
                <div style="width: {{ k.w }}px; height: {{ k.h }}px; position: relative;overflow:hidden;margin: auto;">
                  <img src="{{ url }}" id="image" style="position: absolute; top: -{{ k.y }}px; left: -{{ k.x }}px" />
                </div>
                {% endif %}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
    </div>
</div>
<div class="row">
    {% for name_entries in results %}
    <div class="col-lg-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h4>Results : {{ name_entries.0 }}</h4>
            </div>
        </div>
        {% for d in name_entries.1 %}
            {% if forloop.first %} <div class="row"> {% endif %}
            <div class="col-sm-3 col-xs-6">
                <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>{% if d.result_type == "Region" %} Region {% else %} Frame {% endif %} {{ d.rank }}</h4>
                    <p>In <a href="/videos/{{ d.video_id }}">Video/Dataset {{ d.video_id }}</a> at {{ d.frame_index }}</p>
                    <p>at {{ d.distance|floatformat }}</p>
                </div>
                <div class="box-body">
                    <a href="/frames/by_index/{{ d.video_id }}/{{ d.frame_index }}"><img class="img-responsive img-bordered-sm" style="max-width:80%;max-height:200px;margin-left:auto;margin-right:auto" src="{{ d.url }}"></a>
                </div>
                </div>
            </div>
            {% if forloop.counter|divisibleby:"4" or forloop.last %}</div><div class="row">{% endif %}
            {% if forloop.last %} </div> {% endif %}
        {% endfor %}
    </div>
    {% endfor %}
</div>
<div class="row">
    {% for k in regions %}
        {%  if k.results %}
            <div class="col-lg-12" id="retrieval_{{ k.pk }}">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4>Retrieval results for detected object {{ k.object_name }}</h4>
                    </div>
                    <div class="box-body">
                    <h4 class="text-center" style="margin-bottom:15px;margin-top:20px">Bounding box</h4>
                    <div style="width: {{ k.w }}px; height: {{ k.h }}px; position: relative;overflow:hidden;margin: auto;">
                        <img src="{{ url }}" id="image" style="position: absolute; top: -{{ k.y }}px; left: -{{ k.x }}px" />
                    </div>
                    </div>
                </div>
            </div>
            {% for name,entries in k.results %}
            <div class="col-lg-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4>Results : {{ name }} for detected object {{ k.object_name }} id = {{ k.pk }}</h4>
                    </div>
                </div>
                {% for d in entries %}
                    {% if forloop.first %} <div class="row"> {% endif %}
                    <div class="col-sm-3 col-xs-6">
                        <div class="box box-primary">
                        <div class="box-header with-border">
                            <h4>{% if d.result_type == "Region" %} Region {% else %} Frame {% endif %} {{ d.rank }}</h4>
                            <p>In <a href="/videos/{{ d.video_id }}">Video/Dataset {{ d.video_id }}</a> at {{ d.frame_index }}</p>
                            <p>at {{ d.distance|floatformat }}</p>
                        </div>
                        <div class="box-body">
                            <a href="/frames/by_index/{{ d.video_id }}/{{ d.frame_index }}"><img class="img-responsive img-bordered-sm" style="max-width:80%;max-height:200px;margin-left:auto;margin-right:auto" src="{{ d.url }}"></a>
                        </div>
                        </div>
                    </div>
                    {% if forloop.counter|divisibleby:"4" or forloop.last %}</div><div class="row">{% endif %}
                    {% if forloop.last %} </div> {% endif %}
                {% endfor %}
            </div>
            {% endfor %}
        {% endif %}
    {% endfor %}
</div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
